<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="Dashboard">
  <meta name="keyword"
        content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
  <title>登录页面</title>
  <link href="assets/css/bootstrap.css" rel="stylesheet">
  <link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<div id="login-page">
  <div class="container">
    <form class="form-login">
      <h2 class="form-login-heading">登录</h2>
      <div class="login-wrap">
        <input type="text" class="form-control userID" placeholder="User ID" autofocus>
        <br>
        <input type="password" class="form-control userPW" placeholder="Password">
        <label class="checkbox"><span class="pull-right"></span></label>
        <a class="btn btn-theme btn-block loginD">登录</a>
        <a class="" style="margin-right:25px;" data-target=".add_user" data-toggle="modal">注册</a>
        <a class="" style="float:right;" data-target=".update_password" data-toggle="modal">忘记密码</a>
      </div>
    </form>
    <!--alert框-->
    <div class="alert alert-warning alert-dismissible login-alert" disabled="none" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
      <strong style="font-size: 15px;" v-text="alertInfo"></strong>
    </div>
    <div class="addUser-u">
      <!--添加人员 -->
    <div class="modal fade add_user " tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">×</span></button>
            <h4 class="modal-title" >注册</h4>
          </div>
          <div class="modal-body ">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="control-label">姓名:</label>
                <input type="text" class="form-control" v-model="add_name" >
              </div>
              <div class="form-group">
                <label for="recipient-name" class="control-label">账号:</label>
                <input type="text" class="form-control" v-model="add_username" >
              </div>
              <div class="form-group">
                <label for="recipient-name" class="control-label">密码:</label>
                <input type="text" class="form-control" v-model="add_password" >
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" @click="addUser_people()">添加</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 忘记密码-->

      <div class="modal fade update_password " tabindex="-1" role="dialog"
           aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                  aria-hidden="true">×</span></button>
              <h4 class="modal-title">忘记密码</h4>
            </div>
            <div class="modal-body ">
              <form>
                <div class="form-group">
                  <label for="recipient-name" class="control-label">账号:</label>
                  <input type="text" class="form-control" v-model="update_username" >
                </div>
                <div class="form-group">
                  <label for="recipient-name" class="control-label">密码:</label>
                  <input type="text" class="form-control" v-model="update_password_new" >
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary" @click="update_user()">修改</button>
            </div>
          </div>
        </div>
      </div>

    <div class="alert alert-warning alert-dismissible login-alert" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
      <strong style="font-size: 15px;" v-text="alert_text"></strong>
    </div>
    </div>

  </div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.backstretch.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script src="js/server-url.js"></script>
<script>
  $.backstretch("assets/img/login-bg.jpg", {speed: 500});
  var loginAlert = new Vue({
    el: '.login-alert',
    data: {
     alertInfo:'',//弹出框信息
    },
    created: function () {},
  });
  var add_user=new Vue({
    el:'.addUser-u',
    data:{
       add_name:"",
      add_username:"",
      add_password:"",
      alert_text:"",
      update_username:"",
      update_password_new:""
    },
    created:function () {
     var _this=this;
    },
    methods:{
      addUser_people:function () {
        var _this=this;
        var _success=function (_data) {
           $('.add_user').modal('hide');
            _this.alert_text=_data.message;
          $('.login-alert').show();
          setTimeout(function(){
            $('.login-alert').hide();
          },1000)
        };
        var _error=function (_data) {
        };
        UntilAjax("user/add","get",{name:_this.add_name,username:_this.add_username,password:_this.add_password},
        _success,_error);
      },
      update_user:function () {
        var _this=this;
        var _success=function (_data) {
          $('.update_password').modal('hide');
          _this.alert_text=_data.message;
          $('.login-alert').show();
          setTimeout(function(){
            $('.login-alert').hide();
          },1000)
        };
        var _error=function (_data) {

        };
        UntilAjax("user/updatePassword",'get',{username:_this.update_username,password:_this.update_password_new},_success,_error);
      }
    }
  });

  $('.loginD').click(function () {
    var userId = $('.userID').val();
    var userPW = $('.userPW').val();
    if(userId == "" || userId == null){
      loginAlert.alertInfo = '用户名不能为空'
      $('.login-alert').show();
      setTimeout(function () {
        $('.login-alert').hide();//找到对应的标签隐藏
      }, 2000)//1000是表示3秒后执行隐藏代码
      return false;
    }
    if(userPW == "" || userPW == null){
      loginAlert.alertInfo = '密码不能为空'
      $('.login-alert').show();
      setTimeout(function () {
        $('.login-alert').hide();//找到对应的标签隐藏
      }, 2000)//1000是表示3秒后执行隐藏代码
      return false;
    }
    $.ajax({
      url: 'user/getUserInfo',
      method: 'GET',
      data: {
        'username': userId,
        'password': userPW
      },
      success: function (data) {
        console.log('============', data.code);
        if (data.code == 1) {
          window.location.href = 'index.html';

          localStorage.setItem('uid', data.data.id);
          localStorage.setItem("username",data.data.name);
        } else {
          loginAlert.alertInfo = '登录失败'
          $('.login-alert').show();
          setTimeout(function () {
            $('.login-alert').hide();//找到对应的标签隐藏
          }, 2000)//1000是表示3秒后执行隐藏代码
        }
      }
    });
  });
</script>
<style>
  .btn-theme {
    margin-bottom: 15px;
  }

  .form-login h2.form-login-heading {
    background-color: #4b92d0 !important;
  }

  .btn-theme {
    background-color: #4e9adc !important;
    border-color: #69afec !important;
  }

  .login-alert{
    z-index: 1234;
    display: none;
    position: absolute;
    top: 65px;
    width: 800px;
    left: 50%;
    margin-left: -400px;
    -webkit-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
  }
</style>
</body>
</html>
